<template>
	<view class="container d-flex flex-column">
		<uv-navbar bgColor="#fff" :fixed="true" :placeholder="true" :title="title">
			<template v-slot:left>
				<view class="uv-nav-slot">
					<uv-icon
						name="arrow-left"
						size="18"
						@click="gotoIndex()"
						:bold="true"></uv-icon>
				</view>
			</template>
		</uv-navbar>
		<!--轻提示-->
		<view class="containerInner" style="justify-content: center;align-items: center;" v-if="detailLoading">
			<uv-loading-page
				:loading="true"
				:loadingColor="themeColor"
				loading-mode="spinner"></uv-loading-page>
		</view>
		<view class="containerInner" v-if="!detailLoading">
			<!-- {{ order }}123123 -->
			<view class="my-content">
				<view class="my-contentInner">
					<view class="section">
						<list-cell :hover="false" padding="20rpx">
							<view class="w-100 d-flex flex-column">
								<view class="orderStatus mb-20 mt-20">
									{{ order.statusDto.title }}
								</view>
								<view
									class="payBox mb-20 mt-20"
									v-if="
										order.status == 0 && order.paid == 0 && order.isTimeout == 0
									">
									<button
										class="border-radiusClass"
										plain
										size="mini"
										@tap.stop="payMoney(order.orderId)">
										立即支付
									</button>
								</view>
								<view
									class="d-flex align-items-center just-content-center mb-20 mt-20"
									v-if="order.numberId">
									<view class="sort-num">{{ order.numberId }}</view>
								</view>
								<view
									v-if="order.status == 0 && order.paid > 0"
									class="d-flex just-content-center align-items-center font-size-base text-color-assist mb-20 mt-20">
									您前面还有
									<text class="text-color-primary mr-10 ml-10">
										{{ order.preNum }}
									</text>
									单待制作
								</view>
							</view>
						</list-cell>
					</view>
					<view class="section">
						<!-- store info begin -->
						<list-cell :hover="false" padding="20rpx">
							<view class="w-100 d-flex align-items-center">
								<view class="d-flex flex-column w-60">
									<view style="font-size: 34rpx;" class="w-100 font-size-lg font-weight-bold text-color-base text-truncate">
										{{ order.shopName }}
									</view>
								</view>
								<view class="d-flex justify-content-end align-items-center w-40">
									<view
										class="iconfont-yshop icon-mobile icon_custom"
										@click="makePhoneCall(order.shop)"
										></view>
									<view
										class="iconfont-yshop icon-location icon_custom"
										@click="openLocation(order.shop)"
										></view>
								</view>
							</view>
						</list-cell>
						<!-- store info end -->
						<list-cell :hover="false" padding="20rpx">
							<view class="w-100 d-flex flex-column position-relative">
								<view
									class="w-100 d-flex"
									:style="{
										marginBottom:
											index == order.cartInfo.length - 1 ? '0' : '20rpx',
									}"
									v-for="(good, index) in order.cartInfo"
									:key="index">
									<image
										:src="good.image"
										mode="aspectFill"
										class="image"></image>
									<view
										class="d-flex flex-column flex-fill overflow-hidden justify-content-between">
										<view
											class="font-size-lg text-color-base mb-10 text-truncate">
											{{ good.title }}
										</view>
										<view class="font-size-sm text-color-assist text-truncate">
											{{ good.spec }}
										</view>
										<view class="font-size-sm text-color-assist text-truncate">
											<text>
												x{{ good.number }}
											</text>
										</view>
									</view>
									<view
										class="d-flex align-items-center justify-content-end text-color-base"
										style="width: 120rpx">
										<view
											class="font-size-base font-weight-bold font-size-sm">
											￥
											<text class="font-size-base font-size-lg">{{ good.price }}</text>
										</view>
									</view>
								</view>
							</view>
						</list-cell>
						<list-cell :hover="false" padding="20rpx" v-if="false">
							<view class="w-100 d-flex flex-column">
								<view
									class="w-100 d-flex flex-column position-relative mt-30">
									<view
										class="w-100 d-flex align-items-center mb-40"
										v-for="(good, index) in order.products"
										:key="index">
										<view class="d-flex flex-column w-60 overflow-hidden">
											<view
												class="font-size-lg text-color-base mb-10 text-truncate">
												{{ good.title }}
											</view>
											<view
												class="font-size-sm text-color-assist text-truncate">
												{{ good.spec }}
											</view>
										</view>
										<view
											class="d-flex w-40 align-items-center justify-content-between pl-30">
											<view class="font-size-base text-color-base">
												x{{ good.number }}
											</view>
											<view
												class="font-size-base text-color-base font-weight-bold">
												￥{{ good.price }}
											</view>
										</view>
									</view>
								</view>
							</view>
						</list-cell>
					</view>
					<view class="section">
						<list-cell :hover="false" padding="20rpx">
							<view class="w-100 d-flex flex-column">
								<view class="pay-title">订单信息</view>
								<view class="pay-cell" v-if="order.statusDto.payType">
									<view class="pay-cell_label">支付方式</view>
									<view class="pay-cell_value">
										{{ order.statusDto.payType }}
									</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">订单金额</view>
									<view class="pay-cell_value">￥{{ order.totalPrice }}</view>
								</view>
								<view class="pay-cell" v-if="order.orderType == 'takeout'">
									<view class="pay-cell_label">配送费</view>
									<view class="pay-cell_value">￥{{ order.payPostage }}</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">优惠金额</view>
									<view class="pay-cell_value">￥{{ order.couponPrice }}</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">实付金额</view>
									<view class="pay-cell_value">￥{{ order.payPrice }}</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">下单时间</view>
									<view class="pay-cell_value">
										{{ formatDateTime(order.createTime) }}
									</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">订单号</view>
									<view class="pay-cell_value">{{ order.orderId }}</view>
								</view>
							</view>
						</list-cell>
					</view>
					<view class="section">
						<list-cell :hover="false" padding="20rpx" last>
							<view class="w-100 d-flex flex-column">
								<view class="pay-title">用餐信息</view>
								<view class="pay-cell">
									<view class="pay-cell_label">享用方式</view>
									<view class="pay-cell_value">
										{{ order.orderType == 'takein' ? '自取' : '堂食' }}
									</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">取餐时间</view>
									<view class="pay-cell_value">
										{{
											order.getTime
												? formatDateTime(order.getTime)
												: '立即取餐'
										}}
									</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">制作完成时间</view>
									<view class="pay-cell_value">
										{{
											order.deliveryTime
												? formatDateTime(order.deliveryTime)
												: '无'
										}}
									</view>
								</view>
								<view class="pay-cell">
									<view class="pay-cell_label">备注</view>
									<view class="pay-cell_value">
										{{ order.mark ? order.mark : '无' }}
									</view>
								</view>
							</view>
						</list-cell>
					</view>
				</view>
			</view>
			<view
				class="flex justify-end bg-white p-2"
				v-if="order.paid > 0 && order.refundStatus == 0">
				<view class="mr-2">
					<uv-button
						type="success"
						v-if="order.status < 2"
						text="确认收到餐"
						@click="receive"></uv-button>
				</view>
				<view>
					<uv-button
						type="warning"
						text="申请退款"
						@click="refund(order)"></uv-button>
				</view>
			</view>
		</view>
		<uv-safe-bottom></uv-safe-bottom>
	</view>
	<uv-modal
		ref="modal"
		width="500rpx"
		title="提示"
		content="确认收到餐吗？"
		:showCancelButton="true"
		@confirm="confirm"></uv-modal>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	import { formatDateTime } from '@/utils/util'
	import { useMainStore } from '@/store/store'
	import { storeToRefs } from 'pinia'
	const main = useMainStore()
	const { themeColor } = storeToRefs(main)
	import { orderDetail, orderReceive } from '@/api/order'
	const title = ref('订单详情')
	const modal = ref('')
	const order = ref({
		shop: { name: '' },
		statusDto: { payType: '' },
	})
	const detailLoading = ref(true)
	const payMoney = id => {
	    uni.navigateTo({
			url: `/pages/components/pages/payType/payType?id=${id}&noSaveOrderId=${true}`,
		})
	}
	const numForMading = ref(5)
	const currentOrderIdcc = ref('')
	onLoad(option => {
		currentOrderIdcc.value = option.id || ''
		console.log('currentOrderIdcc', option.id);
		detail()
		// ⭐ 关键代码：挂到页面实例
		const pages = getCurrentPages()
		const currentPage = pages[pages.length - 1]
		currentPage.detail = detail
	})

	onPullDownRefresh(() => {
		detail()
	})

	const gotoIndex = () => {
		uni.navigateBack()
	}
	const goback = () => {
		uni.navigateBack()
	}

	const detail = async () => {
		let data = await orderDetail(currentOrderIdcc.value)
		console.log(data,'detailData');
		if (data) {
			order.value = data
		}
		uni.stopPullDownRefresh()
		detailLoading.value = false
	}
	const openLocation = () => {
		let shop = order.value.shop
		uni.openLocation({
			address: shop.addressMap + shop.address + ' ' + shop.name,
			latitude: parseFloat(shop.lat),
			longitude: parseFloat(shop.lng),
			fail(res) {
				console.log(res)
			},
		})
	}
	const makePhoneCall = () => {
		let shop = order.value.shop
		uni.makePhoneCall({
			phoneNumber: shop.mobile,
			fail(res) {
				console.log(res)
			},
		})
	}
	const receive = () => {
		modal.value.open()
	}
	// 确认收到货
	const confirm = async () => {
		let data = await orderReceive({ uni: order.value.orderId })
		if (data) {
			await detail()
		}
	}
	//提交退款
	const refund = order => {
		uni.navigateTo({
			url:
				'/pages/components/pages/orders/refund?orderId=' +
				order.orderId +
				'&payPrice=' +
				order.payPrice +
				'&totalPrice=' +
				order.totalPrice,
		})
	}
</script>

<style lang="scss" scoped>
	.image {
		width: 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
		background-color: #f5f5f5;
	}
	.pay-title{
		border-bottom: 2rpx solid #f5f5f5;
		padding: 0 0 20rpx 0;
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 26rpx;
		&:nth-last-child(1) {
			margin-bottom: 0;
		}
		.pay-cell_label{
			color: rgb(124, 120, 120);
		}
		.pay-cell_value{
			color: #000;
		}
	}

	/* #ifdef H5 */
	.container {
		height: 100%;
		background-color: #f5f5f5;
	}


	.pay-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $font-size-base;
		color: $text-color-base;
		margin-bottom: 40rpx;

		&:nth-last-child(1) {
			margin-bottom: 0;
		}
	}

	.sort-num {
		font-size: 60rpx;
		font-weight: bold;
		color: $text-color-base;
		line-height: 1;
	}



	.icon-lamp,
	.icon-daojishi,
	.icon-takeout,
	.icon-doorbell {
		font-size: 60rpx;
	}

	.uv-nav-slot {
		margin-left: -10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 3px 7px;
		opacity: 1;
		.text-color-base {
			margin-left: 20rpx;
		}
	}

	.orderStatus {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		font-weight: bold;
	}

	.containerInner {
		flex: 1;
		overflow: hidden;
		flex-direction: column;
		display: flex;
		.my-content {
			width: 100%;
			flex: 1;
			overflow: hidden;
			padding: 0 20rpx;
			.my-contentInner {
				width: 100%;
				height: 100%;
				overflow: hidden auto;
				&::-webkit-scrollbar {
					display: none;
				}
				.section{
					margin-bottom: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
					&:first-child{
						margin-top: 20rpx;
					}
				}
			}
		}
	}
	.payBox {
		display: flex;
		align-items: center;
		justify-content: center;
		.border-radiusClass {
			width: 200rpx;
			border-radius: 200rpx;
			border: 1px solid #dcdcdc;
			background-color: $qingzhen-btn-primary-color;
			color: #fff;
		}
	}
	.icon_custom{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		background: #f5f5f5;
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		color: $qingzhen-btn-primary-color;
		&:first-child{
			margin-right: 30rpx;
		}
	}
</style>
